#page-getting-started main {

  p {
    font-size: 16px;
    line-height: 2em;
    color: #727a87;
    letter-spacing: -0.015em;

    &:first-child {
      margin-top: 0;
    }

    a {
      &:hover {
        text-decoration: none;
        color: rgba($blue, .8);
      }
    }
  }

  .code {
    padding-top: 105px;

    .steps {
      padding: 0;

      > li {
        padding-top: 1px;
        margin-bottom: 106px;
        padding-left: 57px;
        position: relative;
        list-style: none;
        clear: both;

        @media (max-width: $screen-md-max) {
          padding-left: 0;
        }

        &::before {
          background: url('/img/getting-started/steps-icon.png') no-repeat 0 0;
          background-size: 48px;
          width: 48px;
          height: 48px;
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
        }

        &::after {
          clear: both;
          display: block;
          content: '';
        }

        &:nth-child(2)::before {
          background-position: 0 -48px;
        }

        &:nth-child(3)::before {
          background-position: 0 -96px;
          margin-bottom: 75px;
        }
      }

      h3 {
        font-size: 22px;
        margin-top: 10px;
        margin-bottom: 19px;
        letter-spacing: -.02em;

        @media (max-width: $screen-md-max) {
          margin-left: 50px;
        }
      }

      .vs {
        img {
          float: left;
        }

        p {
          margin-left: 44px;
          font-size: 12px;
          margin-top: 0;
          line-height: 1.6em;

          strong {
            font-weight: 400;
            color: #727a87;
          }
        }
      }

      .info-container {
        margin-top: 24px;
      }

      .info {
        margin-top: 14px;
        border: 1px solid #e9edf4;
        border-radius: 20px;
        position: relative;
        padding: 10px 16px;
        font-size: 12px;
        width: 100%;
        font-weight: 500;
        transition: .2s border-color, .2s padding-right;

        @media (max-width: $screen-md-max) {
          display: block;
        }

        &::before {
          background: url('/img/getting-started/bulb-icon.png') no-repeat 0 0;
          background-size: 14px;
          height: 14px;
          width: 14px;
          content: '';
          display: inline-block;
          margin-right: 6px;
        }

        i {
          margin-left: 2px;
          display: inline-block;
          transition: .2s transform;
        }

        &:hover {
          text-decoration: none;
          color: $blue;
          border-color: $blue;
          padding-right: 21px;

          i {
            transform: translate3d(5px, 0, 0);
          }
        }
      }
    }

    .templates {
      display: flex;
      flex-wrap: wrap;
      padding-left: 0;
      padding-top: 13px;
      clear: both;
      justify-content: space-between;

      @media (max-width: $screen-md-max) {
        justify-content: space-around;
      }

      li {
        position: relative;
        padding-top: 285px;
        text-align: center;
        list-style: none;
        flex: 0 0 340px;
        margin-bottom: 50px;
        @media (max-width: $screen-md-max) {
          margin-bottom: 50px;
        }

        &::before {
          background: url('/img/getting-started/starter-app-thumbnails.png') no-repeat 0 0;
          background-size: 340px;
          height: 280px;
          width: 340px;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
        }

        &.tabs::before {
          background-position: 0 -280px;
        }

        &.sidemenu::before {
          background-position: 0 -560px;
        }
      }

      code {
        width: 94%;
        display: block;
        font-weight: 600;
        padding: 8px 4px;
        margin-left: 10px;
        font-size: 90%;
        color: #4D8CF4;
        background-color: #ecf0f6;
        border-radius: 4px;
      }
    }

    .left {
      float: left;
      width: 48%;

      @media (max-width: $screen-xs-max) {
        float: none;
        width: 100%;
      }
    }

    .right {
      float: right;
      width: 47%;

      @media (max-width: $screen-xs-max) {
        float: none;
        width: 100%;
      }
    }
  }

  pre {
    border: none;
    padding: 0;

    code {
      background: #ecf0f6;
      border-left: 4px #cdd2dd solid;
      border-radius: 3px;
      color: black;
      padding: 13px 15px;
      margin-bottom: 16px;
      margin-top: 8px;
      font-size: 16px;
      line-height: 1.32em;
      letter-spacing: -.07em;
    }
  }

  .what-next {
    padding-top: 94px;
    border-top: 1px solid #f0f3f7;

    hgroup {
      text-align: center;
      padding-top: 50px;
      position: relative;

      &::before {
        background: url('/img/getting-started/steps-icon.png') no-repeat center bottom;
        background-size: 48px;
        width: 48px;
        height: 48px;
        content: '';
        display: block;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        margin: 0 auto;
      }

      h2 {
        font-size: 22px;
        margin-bottom: 18px;
        letter-spacing: -.02em;
      }
    }

    .items {
      list-style: none;
      margin-top: 46px;
      @media (max-width: $screen-md-max) {
        display: flex;
        justify-content: space-around;
      }

      @media (max-width: $screen-sm-max) {
        display: block;
      }

      a {
        padding: 14px 80px 18px 36px;
        margin-right: 27px;
        position: relative;
        cursor: pointer;
        display: inline-block;
        width: 365px;
        margin-bottom: 30px;

        &:last-child {
          margin-right: 0;
        }

        @media (max-width: $screen-sm-max) {
          display: block;
          margin: 18px auto;

          &:last-child {
            margin-right: auto;
          }
        }

        &::before {
          border-radius: 4px;
          background: white;
          box-shadow: 0 3px 8px 2px rgba(0, 0, 0, .08);
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          content: '';
          display: block;
          transition: .3s transform cubic-bezier(.155,1.105,.295,1.12);
        }

        &:hover {
          text-decoration: none;

          &::before {
            transform: scale(1.05);
          }

          &::after {
            transform: translate3d(9.5px, 0, 0);
          }
        }

        @media (max-width: $screen-xs-max) {
          width: 100%;

          &:hover {
            text-decoration: none;

            &::before {
              transform: scale(1);
            }

            &::after {
              transform: translate3d(0, 0, 0);
            }
          }
        }

        &.native::after {
          background-image: url('/img/getting-started/ionic-native-card.png');
        }

        &.theming::after {
          background-image: url('/img/getting-started/theming-card.png');
        }

        &.components::after {
          background-image: url('/img/getting-started/components-card.png');
        }

        &::after {
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: 80px;
          width: 80px;
          height: 144px;
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: calc(50% - 72px);
          transition: .3s transform cubic-bezier(.155,1.105,.295,1.12);
        }

        h3 {
          color: #272a2f;
          font-size: 20px;
          position: relative;
          letter-spacing: -.02em;
          margin-bottom: 20px;
        }

        p {
          color: #727a87;
          font-size: 14px;
          position: relative;
        }
      }
    }

    .subscribe {
      margin-top: 40px;
      margin-bottom: 100px;
      padding-left: 114px;
      position: relative;
      max-width: 750px;
      letter-spacing: -.023em;

      @media (max-width: $screen-xs-max) {
        padding-left: 15px;
      }

      &::before {
        background: url('/img/home/footer-ionitron-logo.png') no-repeat 0 0;
        background-size: 80px;
        width: 80px;
        height: 87px;
        content: '';
        display: block;
        position: absolute;
        left: 11px;
        top: -1px;
      }

      h4 {
        font-size: 16px;

        @media (max-width: $screen-xs-max) {
          margin-left: 90px;
          line-height: 1.8em;
        }
      }

      form {
        display: flex;
        margin-top: 14px;

        .form-control,
        .btn {
          height: 44px;
          font-size: 14px;
          display: inline-block;
          padding: 12px 20px 11px;
        }

        .form-control {
          flex: 1 0 150px;
          border: none;
          height: 52px;
          border-radius: 3px 0 0 3px;
          box-shadow: 0 1px 4px rgba(#222f45, .2);
          transition: .2s box-shadow;

          &::placeholder {
            color: rgba(#a1a9b6, .6);
            font-size: 14px;
          }

          &:focus {
            box-shadow: 0 1px 4px rgba(#222f45, .4);
          }
        }

        .btn {
          height: 52px;
          width: 125px;
          font-weight: 500;
          text-align: center;
          border-radius: 0 3px 3px 0;

          i {
            margin-right: 3px;
          }
        }
      }
    }
  }
}
